<script lang="ts" setup>

// 声明接收绑定在自身组件上的属性
const { data, state, type } = defineProps({
    "state": {},       // 用于变更 编辑 查看的状态  默认 查看 传入 edit 编辑
    "data": {} as any, // 标签选择的数组
    "type": {},        //  单选 多选 切换 默认多选 传入 radio 单选
    "title": {},      // 自定义标题
});

// 声明接收自身组件上的方法
const emit = defineEmits(["change"]);

// 选择时触发
function selectFun(item: any) {
    
    // 不是编辑时取消该函数
    if (state != "edit") return

    // 单选执行
    if (type == "radio") {
        data.forEach((item: any) => item.isSelect = false)
        item.isSelect = true
        emit("change", data) // 回调父组件绑定在自身的方法
        return
    }

    // 多选执行
    item.isSelect = !item.isSelect
    emit("change", data) // 回调父组件绑定在自身的方法
}

</script>
<template lang="">
       <div class="labelSelect">
         <div class="title">
            <div>{{title}}</div>
            <span v-show="state == 'edit'">{{type == "radio"?"（单选）":"（多选）"}}</span>
         </div>
         <ul>
            <li 
              :key="item.title"
              :class="{active:(item.isSelect && state == 'edit') }" 
              v-for="(item,index) of data" 
              @click="selectFun(item)"
              >
              {{ item.title }}
            </li>
         </ul>
      </div>
</template>

<style lang="scss">
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.labelSelect {
    .title {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        div {
            font-size: 16px;
            color: #17204D;
            font-weight: bold;
        }

        span {
            color: #7E849F;
            font-size: 14px;
        }

    }

    ul {
        display: flex;
        flex-wrap: wrap;

        & li:last-child {
            margin: 0;
        }
    }

    li {
        font-size: 14px;
        padding: 6px 12px;
        background: #F7F8FA;
        border-radius: 16px;
        color: #17204D;
        margin-right: 8px;
    }

    .active {
        border: 1px solid #025CEA;
        background: #F0F6FE;
        color: #025CEA;
    }
}
</style>